<template>
     <div>
       <mt-loadmore  :bottom-method="loadBottom" :bottom-all-loaded="allLoaded"   :autoFill="autoFill"  ref="loadmore">
        <template v-if="role">
          <div class="content" v-for="(item, index) in alarmList" :key="item.id" >
          <div class="cell">
            <div  slot="title" v-if="role=='supervisor'" class="title">
              <p v-show="item.metadata.siteName" class="name">{{item.metadata.siteName}}</p>
              <p v-show="item.message" class="message">{{item.message}}</p>
              <p v-show="item.eventDate" class="eventDate">{{item.eventDate}}</p>
            </div>
            <div  slot="title" v-if="role =='proprietor'" class="title">
              <p v-show="item.metadata.siteName" class="name">{{item.metadata.location}}</p>
              <p v-show="item.message" class="message">{{item.message}}</p>
              <p v-show="item.eventDate" class="eventDate">{{item.eventDate}}</p>
            </div>
             <mt-button  v-if="role=='proprietor'&& !type " @click.native="eliminate(index, item.id)" :type="item.buttonType" size="normal">{{item.desc}}</mt-button>
          </div>
          </div>
         </template>
          </mt-loadmore>
          <div class="mask"  v-show="popShow" @click.self="maskClick">
          <div class="pop">
            <div>
              <div>
              <input placeholder="请输入报警的原因" v-model="inputValue" class="input"/>
              </div>
              <div>
              <a href="javascript:void(0)" class="up-file">
               <input type="file" :value="fileValue"  @change="imgChange"/>请上传修复后的图片
               </a>
               <img :src="imgUrl" v-show="imgUrl"/>
              </div>
              <div class="submit" @click="submit">
                提交
              </div>
            </div>
          </div>
          </div>
    </div>
</template>
<script>
import { Toast } from 'mint-ui'
export default {
  props: {
    type: String,
    role: String
  },
  data () {
    return {
      autoFill: false,
      desc: '消除',
      buttonType: 'danger',
      alarmList: [],
      allLoaded: false,
      inputValue: '',
      popShow: false,
      imgUrl: '',
      id: '',
      index: 0,
      fileValue: '',
      param: {
        siteid: '',
        assetid: '',
        page: '1',
        pageSize: '20',
        startDate: '',
        endDate: '',
        ismeasurement: 'NO',
        islocation: 'NO',
        isalert: 'YES',
        history: 'NO'
      },
      pages: 0

    }
  },
  created () {
    this.getAlarmList(0)
  },
  computed: {
    siteid () {
      const role = this.$store.state.loginState
      return role === 'supervisor' ? '' : this.$store.state.user.sitelist[0].siteid
    }
  },
  methods: {
    goback () {
      this.$router.go(-1)
    },
    eliminate (index, id) {
      this.inputValue = ''
      this.imgUrl = ''
      this.fileValue = ''
      this.popShow = true
      this.id = id
      this.index = index
    },
    imgChange (el) {
      let file = el.target.files[0]
      this.upload(file)
    },
    async upload (file) {
      let param = new FormData() // 创建form对象
      param.append('file', file, file.name)// 通过append向form对象添加数据
      let config = {headers: {'Content-Type': 'multipart/form-data'}}
      const res = await this.$store.dispatch('upload', param, config)
      if (res.status === '0') {
        this.imgUrl = res.context
      }
    },
    async submit () {
      if (!this.inputValue) {
        Toast('告警原因不能为空!')
        return
      }
      if (!this.imgUrl) {
        Toast('请上传图片！')
        return
      }
      const param = {
        alertid: this.id,
        spotimage: this.imgUrl,
        reason: this.inputValue
      }
      const res = await this.$store.dispatch('removeWarning', param)
      if (res.status) {
        const item = this.alarmList[this.index]
        item.buttonType = 'default'
        item.desc = '已消除'
        this.alarmList.splice(this.index, 1, item)
        this.popShow = false
        Toast(res.tips)
      }
    },
    async getAlarmList (type) {
      this.param.siteid = this.siteid
      if (this.type) {
        this.param.history = 'YES'
      }
      const res = await this.$store.dispatch('assetevent', this.param)
      if (res.status === '0') {
        res.context.results.forEach(item => {
          item.buttonType = 'danger'
          item.desc = '消除'
        })
        this.pages = res.context.numResults
        type ? this.alarmList = [...this.alarmList, ...res.context.results] : this.alarmList = [...res.context.results]
      }
    },
    maskClick () {
      this.popShow = !this.popShow
    },
    //
    loadTop () {
      this.$refs.loadmore.onTopLoaded()
    },
    async loadBottom () {
      this.$refs.loadmore.onBottomLoaded()
      if (this.pages < this.param.pageSize) {
        this.allLoaded = true
        return
      }
      this.param.page++
      await this.getAlarmList(1)
    }
  }
}
</script>
<style lang="less" scoped>
p{
  line-height: 50px;
  border-bottom: 1px solid #eee
}
.cell{
  display: -webkit-box;
  align-items: center;
  padding: 0 10px;
  font-size: 16px;
  border-bottom: 1px solid  #25a4bb;
  .title{
    flex:1;
  }
}
.input{
  width: 100%;
  line-height: 30px;
  border: 1px solid #eee;
  border-radius: 6px;
}
.mask{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ddd;
}
.pop{
  position: absolute;
  width: 250px;
  top: 150px;
  left: 50%;
  padding: 10px;
  border-radius: 6px;
  transform: translateX(-50%);
  font-size: 14px;
  border:  1px solid #4E6082;
  img{
    width: 150px;
    height: 150px;
  }
}
 .up-file {
      padding: 0px 10px;
      height: 30px;
      width: fit-content;
      text-align: center;
      line-height: 30px;
      position: relative;
      cursor: pointer;
      background: #44bbff;
     color: #FFFFFF;
     border: 1px solid #ddd;
     border-radius: 6px;
     overflow: hidden;
     display: inline-block;
     font-size: 14px;
     margin: 10px 0;
 }
 .up-file input {
     position: absolute;
     font-size: 14px;
     right: 0;
     top: 0;
     opacity: 0;
     filter: alpha(opacity=0);
     cursor: pointer;
 }
 .submit{
   width: 50px;
   height: 30px;
   line-height: 30px;
   text-align: center;
   background: #44bbff;
   color: #fff;
   font-size: 14px;
   border-radius: 6px;
 }
</style>
